一个 web 系统，加载很慢，交给你来优化，你会怎么办？

1. 性能分析与瓶颈定位

使用 Chrome DevTools 的 Performance 和 Network 面板 ，分析页面加载的时间消耗，找出以下关键瓶颈：
- 白屏时间 （First Paint）过长
- 首屏渲染时间 （Largest Contentful Paint, LCP）过慢
- 阻塞资源 导致延迟加载
- API 请求过多或响应时间长

2. 资源加载优化

减少 HTTP 请求数量：
- 合并 CSS、JS 文件，或者采用 Tree Shaking 去掉无用代码。
- 使用雪碧图（Sprites）处理小图片，或者直接改用 SVG。
压缩与优化资源：
- 压缩图片（使用 WebP），优化视频大小。
- 压缩 JS、CSS、HTML 文件，开启 Gzip 或 Brotli 压缩。
Lazy Loading：
- 延迟加载图片和视频，使用 loading="lazy" 属性。
- 采用懒加载策略来加载非首屏模块。

3. 静态资源缓存

启用浏览器缓存： 设置 Cache-Control、ETag 等响应头，缓存静态资源。
使用 CDN： 静态资源分发到 CDN 节点，减少服务器负载。

4. 网络传输优化

启用 HTTP/2 或 HTTP/3: 并行加载资源，降低传输延迟。
减少跨域请求: 优化 API 接口分布，避免预检请求（OPTIONS）。
开启 DNS 预解析: 提前解析第三方域名。

5. 渲染与框架性能优化

服务端渲染（SSR）/静态生成（SSG）： 减少客户端渲染时间，提升首屏性能。
组件懒加载: 分离路由和组件，按需加载代码。
虚拟化列表: 渲染大量数据时使用 react-window 或类似方案。

6. 后端与 API 优化

数据库优化：
- 建立索引，优化查询。
- 数据库结果分页返回。
接口合并与优化： 减少多次 API 调用，使用 GraphQL 或批量 API。
缓存策略： 使用 Redis 等缓存热点数据，减轻数据库查询压力。

7. 用户体验提升

骨架屏: 在加载内容前显示占位图，减少白屏时间。
Loading 动画: 提升用户感知体验。

8. 监控与持续优化

引入性能监控工具:
- Lighthouse 进行性能分析。
- Sentry 捕获性能问题。
- Web Vitals（FCP、LCP、CLS）实时监控。

通过系统化分析和持续优化，可以显著提升 Web 系统的加载性能，带来更流畅的用户体验。